import { useState } from "react"
import { Button } from 'antd';
import "./start-frame.less"
import { ModalForm } from "./modalForm";
import { List } from "./groupList";
import { RightCon } from "./rightCon";
import { AddFolder } from "./addFolder";
import CotextContainer from "./context";

export function StartCon() {
    const [data, setData] = useState({
        groupId: 0,
        groupName: "个人空间",
    })
    const [update, setUpdate] = useState(Math.random());
    const [Visable, SetVisable] = useState(false);
    const [modal, setModal] = useState(Math.random());
    const [rightupdate, setRightUpdate] = useState(Math.random());
    const [list, setList] = useState([{
        groupName: " ",
        groupId: 0,
    }]);
    return (
        <CotextContainer.Provider value={{ group: data, setGroup: setData }}>
            <div className="MainContent">
                <div className="LeftSideCon">
                    <div className="group"> <span>{data.groupName}</span> <AddFolder setUpdate={setUpdate} /> </div>
                    <List key={update} setList={setList} setModal={setModal}/>
                </div>
                <div className="RightSideCon">
                    <div className="RightHead">
                        <span className="RightWords">{data.groupName} 分组共1个项目</span>
                        <span className="ModBut">
                            <Button
                                onClick={
                                    () => {
                                        SetVisable(true);
                                    }
                                }
                                type="primary"
                            >
                                创建项目
                            </Button>
                        </span>
                        <ModalForm key={modal} Visable={Visable} SetVisable={SetVisable} setRightUpdate={setRightUpdate} list={list} data={data} />
                    </div>
                    <RightCon SetVisable={SetVisable} key={rightupdate} />
                </div>
            </div >
        </CotextContainer.Provider>

    )

}
